<template>
  <div class="common_page">
    <headerVue
      :header_title="header_title"
      :showHeader="showHeader"
      :style="{ width: this.$store.state.setting.width_s + 'px' }"
    />

    <div
      class="vue_page_content"
      :class="{'show_header_page':showHeader == true,'max_page':showMaxPage == true}"
      :style="{ width: this.$store.state.setting.width_s + 'px' }"
      style="overflow: auto"
    >
      <slot name="page_body">Body</slot>
    </div>

    <div class="vue_page_footer">
      <slot name="page_footer"
        ><footerVue :style="{ width: $store.state.setting.width_s + 'px' }"
      /></slot>
    </div>
    <!-- <footerVue :style="{ width: this.$store.state.setting.width_s + 'px' }" /> -->
  </div>
</template>

<script>
import headerVue from "./header.vue";
import footerVue from "./footer.vue";
// import pageLoading from "./pageLoading.vue";
export default {
  name: "commonPage",
  data() {
    return {};
  },
  components: {
    headerVue,
    footerVue,
    // pageLoading
  },
  props: {
    showHeader: {
      type: Boolean,
      default: true,
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    showMaxPage: {
      type: Boolean,
      default: false,
    },
    header_title: {
      type: String,
      default: "",
    },
   
  },
  created() {
    // this.$store.commit("setSettings", {
    //   show_xheader: this.showHeader,
    //   show_xfooter: this.showFooter
    // });
  },
  methods: {},
};
</script>
<style scoped>
.common_page {
  /* position: relative; */
  height: 100%;
}
</style>
<style >
.vue_page_content {
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.show_header_page {
  height: calc(100% - 90px);
}
.max_page{
  height: 100%;
}
</style>